<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-upload
        ref="upload"
        class="upload-demo"
        action=""
        multiple
        :limit="limit"
        :file-list="fileList"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :on-remove="handleRemove"
        :on-preview="handlePreview"
        :on-exceed="handleExceed"
        :http-request="handleUpload"
        :on-change="handleOnChange"
      >
        <el-button
          size="small"
          type="text"
          >添加+</el-button
        >
      </el-upload>
    </div>
  </div>
</template>

<script>
import { upyunUpload } from '@/utils/upyun'

export default {
  name: 'FileUpload',
  data() {
    return {
      fileList: [],
      limit: 20
    }
  },
  watch: {},
  mounted() {},
  methods: {
    getToken() {
      return getToken()
    },
    setValue(value) {
      if (value) {
        this.fileList = value.split('|').map((item) => {
          return {
            name: item,
            url: item
          }
        })
        this.$emit('change', this.fileList)
      }
    },
    // 上传前
    handleBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100
      if (!isRightSize) {
        this.$message.error('文件大小超过 100MB')
      }
      return isRightSize
    },
    // 上传中
    handleProgress(event, file, fileList) {},
    handleOnChange(file, fileList) {
      this.$emit('change', fileList)
    },
    // 上传成功
    handleSuccess(response, file, fileList) {},
    // 删除
    handleRemove(file, fileList) {
      this.$emit('change', fileList)
    },
    // 错误
    handleError() {
      this.$message({
        type: 'error',
        message: file.name + '上传失败，请稍后重试'
      })
    },
    // 预览
    handlePreview(file) {
      // console.log(file.name)
      const downloadLink = document.createElement('a')
      // 设置a标签的href属性为下载链接
      downloadLink.href = file.url || file.response
      downloadLink.target = '_blank'
      // 设置a标签的download属性为文件名
      downloadLink.download = file.name
      // 将a标签添加到HTML文档中的某个元素中
      document.body.appendChild(downloadLink)
      // 触发a标签的点击事件，即模拟用户点击下载链接
      downloadLink.click()
    },
    reset() {
      this.fileList = []
    },
    handleExceed() {
      this.$message({
        type: 'error',
        message: '最多可上传20个附件'
      })
    },
    // 自定义上传
    handleUpload(file) {
      upyunUpload({ file: file.file, watermark: false, info_type: 'notice' })
        .then((res) => {
          if (res) {
            file.onSuccess(res)
          }
        })
        .catch(() => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.img-box {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  video {
    width: 100%;
    height: 100%;
    user-select: none;
  }
  .icon-success {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    i {
      margin-top: 11px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
  .icon-loading,
  .icon-delete {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    .text {
      font-size: 14px;
    }
  }
  .icon-loading i {
    font-size: 28px;
  }
  .icon-delete {
    display: none;
    i {
      cursor: pointer;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &:hover {
    .icon-delete {
      display: flex;
    }
  }
}
.error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  i {
    margin-bottom: 10px;
  }
}
</style>
